@import "../../style/public";
.text-blue {
  color: #459DFF!important;
}
.text-black {
  color: #333!important;
}
.order-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(0,0,0,.4);
  &_content {
    @include remCalc(width, 540);
    @include remCalc(padding, 30, 0, 30);
    @include remCalc(border-radius, 12);
    background-color: #fff;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .zhk-alert_close {
      position: absolute;
      top: 0;
      right: 0;
      color: #ccc;
      @include remCalc(font-size, 22);
      @include remCalc(padding, 20);
    }
  }
  li {
    @include remCalc(margin-top, 20);
  }
}
.order-details {
  .zhk-list_rarrow{
    display: inline-block;
    &.unfold{
      transform: rotate(180deg);
    }
  }
  .section-title{
    @include remCalc(font-size, 32);
    @include remCalc(padding, 20,30);
    @include thin-border(true,false);
    color: #333;
    display: flex;
    align-items: center;
    background: #fff;
    span{
      div{
        @include remCalc(font-size, 24);
        @include remCalc(padding, 12,0,0,0);
        color: #999;
      }
    }
    div{
      flex:1;
      text-align: right;
      i{
        color:#ccc;
        @include remCalc(font-size, 36);
      }
    }
  }
  .through-line{
    //text-decoration: line-through;
    position: relative;
    &::after{
      content: "";
      //@include remCalc(width, 200);
      width:100%;
      height:1px;
      background: #333;
      position: absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
    }
  }
  .sub-ul {
    @include remCalc(padding,0, 30);
    ul {
        position: relative;
        &::before{
            $size:0.5rem;
            content: "";
            position: absolute;
            @include remCalc(top, -20);
            @include remCalc(right, 20);
            width: 0;
            height: 0;
            border-left: $size solid transparent;
            border-right: $size solid transparent;
            border-bottom: $size solid #eee;
        }
      background: #eee;
      @include remCalc(border-radius, 8);
      opacity: 0.5;
      @include remCalc(padding, 10,0);
      > li {
        display: flex;
        @include remCalc(padding, 10,30);
        span {
            @include remCalc(font-size, 20);
            color: #999;
        }
        >div {
          text-align: right;
          @include remCalc(font-size, 20);
          color: #999;
        }
      }
    }
  }
  .refund-dialog {
    $color-left-font: #333333;
    $color-font-light: #a5a5a5;
    $color-border: #e5e5e5;
    $color-content: #fff;
    $color-button: #09bb07;
    position: fixed;
    width: 100%;
    height: 100%;
    .refund-layer {
      @extend %layer;
    }
    .refund-dialog-content {
      position: absolute;
      z-index: 99999;
      background: #fff;
      @include remCalc(border-radius, 5);
      @include remCalc(width, 620);
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .confirmContent {
        @include remCalc(padding, 38, 30, 0, 30);
        h3 {
          width: 100%;
          text-align: center;
          @include remCalc(padding-bottom, 33);
        }
        ul {
          li {
            width: 100%;
            @include remCalc(padding-bottom, 29);
            @include remCalc(font-size, 32);
            color: #42414a;
            display: flex;
            justify-content: space-between;
            input {
              @include remCalc(width, 546);
              @include remCalc(font-size, 32);
              @include remCalc(height, 86);
              @include remCalc(padding-left, 10); //@include remCalc(margin-bottom, 30);
              border: 1px solid $color-border;
              border-radius: 0;
              -webkit-appearance: none;
            }
          }
        }
      }
      .btn-box {
        border-top: 1px solid $color-border;
        display: flex;
        span:first-child {
          border-right: 1px solid $color-border;
        }
        span {
          flex: 1;
          text-align: center;
          color: #3fb0ff;
          @include remCalc(font-size, 36);
          @include remCalc(padding, 28, 0);
        }
        .right {
          //color: $color-font-light;
          &.disable {
            color: #ccc !important;
          }
        }
      }
    }
  }
  .page-body {
    @include remCalc(padding-bottom, 30);
  }
  .btn-wrap {
    .btn {
      background: #f64b5b;
    }
  }
  .error {
    @include remCalc(padding, 10, 0);
    @include remCalc(font-size, 28);
    @include remCalc(line-height, 40);
    .warning {
      i {
        @include remCalc(margin-right, 10);
        position: relative;
        @include remCalc(top, 3);
      }
      color: #f96268;
      text-align: center;
    }
    .info {
      text-align: center;
      color: #999999;
    }
  }
  .section {
    @include thin-border(true,false);
    @include remCalc(margin-bottom, 30);
    background: #fff;
    .total-get {
      @include remCalc(padding, 40, 30, 25, 30);
      text-align: center;
      div {
        @include remCalc(font-size, 28);
        color: #666;
      }
      p {
        @include remCalc(font-size, 60);
        color: #333;
      }
      .chuzhi{
        @include remCalc(font-size, 24);
        @include remCalc(padding, 8,12);
        @include remCalc(border-radius, 4);
        color:$color-green;
        border:1px solid $color-green;
        display: inline-block;
        line-height: 1.1;
      }
    }
    .title {
      @include remCalc(margin-left, 30);
      @include remCalc(line-height, 90);
      @include remCalc(padding-right, 30);
      @include remCalc(font-size, 32);
      color: #333;
      //@include thin-border(false, false, bottom);
      display: flex;
      justify-content: space-between;
      align-items: center;
      i {
        color: #c7c7cc;
        @include remCalc(font-size, 36);
        &::before {
          display: inline-block;
          transform: rotate(90deg);
        }
      }
      &.fold {
        & + .order-list {
          display: none;
        }
        i {
          &::before {
            transform: rotate(-90deg);
          }
        }
      }
    }
    .title.fold:after {
      border-bottom: 0;
    }
  }
  .status-red {
    color: #f64b5b !important;
  }
  .status-green {
    color: #2ad0a9 !important;
  }
  .status-blue {
    color: #508cee !important;
  }
  .status-orange {
    color: #FD8217 !important;
  }
  .order-list {
    background: #fff;
    @include remCalc(padding, 15, 0);
    &.border-top {
      @include thin-border(false, false, top);
    }
    &.border-bottom {
      @include thin-border(false, false, bottom);
    }
    li {
      line-height: 1.1;
      display: flex;
      @include remCalc(padding, 15, 30);
      > span {
        @include remCalc(padding-right, 30);
        @include remCalc(font-size, 30);
        color: #666;
      }
      > div {
        @include remCalc(font-size, 28);
        color: #7e7e7e;
        text-align: right;
        flex: 1;
        word-break:break-all;
        word-wrap:break-word;
      }
    }
  }
  .three-colo {
    @extend .order-list;
    & + .order-list {
      @include remCalc(margin-left, 30);
      > li {
        @include remCalc(padding-left, 0);
      }
      @include thin-border(false, false, top);
    }
    .sub-title {
      color: #7e7e7e;
      @include remCalc(font-size, 28);
      @include remCalc(padding, 15, 30);
      i {
        position: relative;
        top: 1px;
      }
    }
    .name {
      white-space: normal;
      flex: 1;
      @include remCalc(padding-right, 20);
      .attr {
        color: #ccc;
        @include remCalc(font-size, 26);
        @include remCalc(padding, 10, 0);
      }
      .tag {
        color: #f64b5b;
        @include remCalc(font-size, 24);
        @include remCalc(padding, 10, 0);
      }
    }
    .count {
      text-align: right;
      @include remCalc(font-size, 28);
      color: #7e7e7e;
      @include remCalc(width, 100);
      @include remCalc(padding-right, 40);
    }
    .total-money {
      text-align: right;
      @include remCalc(width, 144);
      @include remCalc(font-size, 28);
      color: #7e7e7e;
      padding-right: 0;
      .reduce {
        @include remCalc(padding, 12, 0);
        color: #c7c7cc;
        @include remCalc(font-size, 24);
        text-decoration: line-through;
      }
    }
  }
}

.order-result {
  $color-font-light: #a5a5a5;
  $color-font-deep: #333333;
  .head {
    background: #fff;
    @include remCalc(padding, 58, 30, 0, 30);
    @include thin-border(false, false, bottom);
    text-align: center;
    .success {
      color: #16d076;
      @include remCalc(font-size, 120);
    }
    .failed {
      color: #f76160;
      @include remCalc(font-size, 120);
    }
    .title {
      @include remCalc(margin-top, 20);
      @include remCalc(font-size, 32);
      color: $color-font-deep;
    }
    .msg {
      @include remCalc(margin-top, 20);
      @include remCalc(font-size, 28);
      color: #a5a5a5;
    }
    .money {
      @include remCalc(margin-top, 36);
      @include remCalc(font-size, 28);
      @include remCalc(padding, 0, 30);
      color: #a5a5a5;
      font-weight: normal;
      b {
        color: $color-font-deep;
        @include remCalc(font-size, 50);
      }
    }
    ul {
      @include thin-border(false, false, top);
      @include remCalc(padding, 18, 0);
      @include remCalc(margin-top, 56);
      li {
        display: flex;
        line-height: 1.1;
        @include remCalc(padding, 12, 0);
        @include remCalc(font-size, 28);
        justify-content: space-between;
        align-items: center;
        span {
          color: #333;
        }
        div {
          color: #a5a5a5;
        }
      }
    }
  }
  .btn-wrap {
    @include remCalc(margin-top, 60);
  }
}

.refund {
  .select-btn {
    span {
      &.notNull {
        color: #333;
      }
    }
  }
  .store-info {
    background: #fff;
    @include thin-border(false, false, bottom);
    @include remCalc(padding, 14, 30, 18, 30);
    @include remCalc(margin, 0, 0, 20, 0);
    .store-name {
      @include remCalc(font-size, 32);
      @include remCalc(line-height, 46);
      color: #333;
    }
    .store-id {
      @include remCalc(font-size, 28);
      @include remCalc(line-height, 40);
      color: #999;
      user-select: text;
    }
  }
  .form-style {
    @include thin-border(true, false);
    @include remCalc(margin-bottom, 20);
    > li {
      background: #fff;
      @include thin-border(false, false, top);
      @include remCalc(min-height, 88);
      .move-down {
        @include remCalc(margin, 12, 0, 0, 0);
      }
      .is-support {
        color: #ccc;
        @include remCalc(font-size, 30);
        @include remCalc(margin, 12, 10, 0, 0);
      }
      &.readOnly {
        color: #bbb !important;
      }
      &:first-child {
        &:after {
          display: none;
        }
      }
      &:nth-child(3) {
        .perce {
          @include remCalc(padding-top, 3);
        }
      }
      &.upload-img {
        display: list-item;
        > span {
          display: block;
        }
        > div {
          display: block;
          text-align: left;
          .upload-list {
            display: flex;
            li {
              @include remCalc(margin-right, 30);
            }
          }
          .upload-tip {
            @include remCalc(font-size, 24);
            @include remCalc(padding, 14, 0, 20, 0);
            box-sizing: border-box;
            color: #999;
            span {
              color: $color-red;
              @include remCalc(padding, 0, 8);
            }
          }
          .upload-btn {
            @include remCalc(width, 120);
            @include remCalc(height, 120);
            @include remCalc(border-radius, 6);
            border: 1px solid $color-border;
            position: relative;
            &::before {
              content: "";
              @include remCalc(width, 64);
              @include remCalc(height, 4);
              position: absolute;
              background: #ddd;
              @include remCalc(left, 28);
              @include remCalc(top, 58);
            }
            &::after {
              content: "";
              @include remCalc(height, 64);
              @include remCalc(width, 4);
              position: absolute;
              background: #ddd;
              @include remCalc(top, 28);
              @include remCalc(left, 58);
            }
          }
          .upload-wrap {
            position: relative;
            img {
              // @include remCalc(width, 120);
              width: auto;
              @include remCalc(height, 120);
            }
            i {
              position: absolute;
              @include remCalc(top, -16);
              @include remCalc(right, -16);
              color: #ddd;
              background: #fff;
              border-radius: 50%;
              &::after {
                content: "";
                $size: -16;
                position: absolute;
                @include remCalc(top, $size);
                @include remCalc(bottom, $size);
                @include remCalc(left, $size);
                @include remCalc(right, $size);
              }
            }
          }
        }
      }
      display: flex;
      @include remCalc(font-size, 32);
      box-sizing: border-box;
      color: #333;
      > span {
        min-width: 4rem; // @include remCalc(min-width, 200);
        .tip {
          @include remCalc(font-size, 22);
          color: #999;
          @include remCalc(padding-top, 22);
          .sl-flbgz {
            color: #f86e21;
            @include remCalc(padding-right, 4);
          }
        }
      }
      > div {
        flex: 1;
        text-align: right;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        .area {
          .select-btn {
            @include remCalc(margin, 14, 0, 0, 0);
            &:first-child {
              margin-top: 0;
            }
          }
        }
        > input {
          text-align: right;
          height: 100%;
          color: #333;
          @include remCalc(font-size, 32);
          &.input-thin {
            @include remCalc(width, 200);
            @include remCalc(padding, 20, 0);
            @include remCalc(margin, -20, 0);
            & + span {
              @include remCalc(padding, 0, 20);
            }
          }
        }
        .select-btn {
          color: #999;
          i {
            @include remCalc(font-size, 26);
          }
        }
        .idCardPicker {
          height: 100%;
          display: flex;
          align-items: center;
          @include remCalc(font-size, 32);
          .null-text {
            color: #d4d4d4;
          }
          span {
            & + span {
              @include remCalc(padding, 0, 0, 0, 10);
            }
          }
        }
      }
    }
  }
  .form-style:last-child {
    margin-bottom: 0;
  }
  .remark {
    span {
      display: block;
    }
    div {
      @include remCalc(height, 180);
      @include remCalc(font-size, 32);
      color: #333;
      @include thin-border(true, false);
      textarea {
        @include remCalc(font-size, 32);
        color: #333;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        @include remCalc(padding, 20, 30);
      }
    }
  }
  .btn-wrap {
    @include remCalc(margin-top, 60);
  }
}
